<template>
  <div>
    <div class="table-options clearfix">

      <div class="tab-search">
        <label>选择分类</label>&nbsp;
        <select name="" style="width: 100px;margin-right:15px" v-model="selectClass">
          <option v-if="classifyList" v-for=" (item,index) in classifyList" :key="index" :value="item.goodsclasscode">
            {{item.goodsclassname}}
          </option>
        </select>&nbsp;
      </div>
      <div class="clearfix" style="position: absolute;left: 210px">
        <button type="button" @click="opWindow" class="btn btn-sm btn-primary" id="add">新增
        </button>
      </div>
    </div>
    <!--表格-->
    <div class="table-responsive">
      <table-classify :showList='showList' :Thead="Thead" @updataItem="updataItem" @deleteItem="deleteItem">

      </table-classify>
    </div>
    <!-- 编辑或新增的弹框 -->
    <edit-model ref="editModel" title="分类推荐配置">
      <classify-add-toast
        ref="classifyAddToast"
        :TITLE="TITLE"
        :IMAGE="IMAGE"
        :GOODS="GOODS"
        :currentGoodsCode="goodsCode"
        :classifyList="classifyList"
        :currentClassCode="selectClass"
        :buttonType="buttonType"
        @searchproductmodel ="searchproductmodel"
        @closeModel='closeModel'
        @updata="updata" slot="main">
      </classify-add-toast>
      <div slot="slide">
				<search-encode ref="searchModel" @getgoodscodedata="getgoodscode"></search-encode>
			</div>
    </edit-model>
    <toast ref="toast">
    </toast>
    <!--<m-dialog ref="dialog"></m-dialog>-->
  </div>
</template>

<script>
  import TableClassify from '@/edit-components/TableClassify'
  import SearchEncode from "@/edit-components/SearchProduct";
  import Dialog from "@/edit-components/Dialog";
  import EditModel from "../../../edit-components/EditModel";
  import Toast from '@/edit-components/Toast'
  import AddClassifyCategory from '@/edit-components/AddClassifyCategory'
  import ClassifyAddToast from '@/edit-components/ClassifyAddToast'
  import {queryCommendList, deleteCommendList} from '@/utils/editAxios'
  import translateDate from '@/utils/translateDate'
  function list() {
    this.categoryName = ''
    this.classificationId = ''
    this.image = ''
  }
  export default {
    data () {
      return {
        buttonType: 'add',
        selectClass: '',
        classifyName: '',
        TITLE: null,
        IMAGE: null,
        GOODS: [],
        showList: [],
        goodsCode:"",
        Thead: [
          {titleName: '分类名称', paramName: 'classifyName'},
          {titleName: '资源位', paramName: 'relPositionName'},
          {titleName: '资源名称', paramName: 'relTitle'},
          {titleName: '资源类型', paramName: 'promotionName'},
          {titleName: '更新日期', paramName: 'showTime'},
        ]
      }
    },
    components: {
      TableClassify,
      EditModel,
      Toast,
      AddClassifyCategory,
      ClassifyAddToast,
      SearchEncode
    },

    methods: {
    	searchproductmodel() {
    		this.$refs.editModel.showSlideMenu();
				this.$refs.searchModel.hideModel();
    	},
    	getgoodscode(msg) {
    		this.$refs.classifyAddToast.changeGoodsCode(msg)
//      this.goodsCode = msg;
      },
      closeModel () {
        this.$refs.editModel.hideCover()
      },
      async init() {
        var data = this.classifyList
        if (data) {
          var classCode = data[0] ? data[0].goodsclasscode : ''
          this.selectClass = classCode
        }
      },
      async queryClassifyInfo (data) {
        var res = await queryCommendList({relGroup: data})
        res = res.data
        this.rebuildDate(res.data)

      },
      rebuildDate (data) {
        var showList = []
        this.TITLE = data.find((item) => {
            return item.relPosition == 'TITLE'
          }) || null

        this.IMAGE = data.find((item) => {
            return item.relPosition == 'IMAGE'
          }) || null

        this.GOODS = data.filter((item) => {
            return item.relPosition == 'GOODS'
          }) || []
        if (this.TITLE) {
          showList.push(this.TITLE)
        }
        if (this.IMAGE) {
          showList.push(this.IMAGE)
        }
        showList = showList.concat(this.GOODS)
        this.translateData(showList)
        this.showList = showList
      },
      translateData (data) {
        var classifyName = this.classifyName
        data.map((item) => {
          if (!item) {
            return null
          }
          item.classifyName = classifyName //添加 classifyName
          item.showTime = translateDate(item.createTm)
          item.promotionName = !item.promotionType ? '' : item.promotionType == 1 ? "商品" : '活动'
          item.relPositionName = item.relPosition == 'TITLE' ? '标题位' : item.relPosition == 'IMAGE' ? '图片位' : item.relPosition == 'GOODS' ? '商品位' : ''
        })
      },

      opWindow() {
        this.buttonType = 'add';
        this.$refs.editModel.showCover();
        // let item = this.getDataItem(index);
        this.dataItem = {};
      },
      //发布按钮的点击事件


      async updataItem (item){
        this.buttonType = 'updata'
        this.$refs.classifyAddToast.initUpData(item)
        this.$refs.editModel.showCover()
      },
      async deleteItem (item) {
        var res = await deleteCommendList({rid: item.rid})
        res = res.data
        if (res.returnCode == 0) {
          //删除失败
          this.$refs.toast.toast('删除失败', 1000)
          return
        }
        this.$refs.toast.toast('删除成功', 1000)
        this.updata()
      },

      updata (){
        this.queryClassifyInfo(this.selectClass)
        PSEvent.trigger("finalListUpdate");
      }

    },
    watch: {
      selectClass (data) {
        this.classifyName = ''
        if (this.classifyList) {
          var selectItem = this.classifyList.find((item) => {
            return item.goodsclasscode == data
          })
          this.classifyName = selectItem.goodsclassname
        }

        this.queryClassifyInfo(data)
      },
    },
    computed: {
      classifyList () {
        return this.$store.getters['cjy/classifyData']
      }
    },
    mounted () {
      this.init()
    },
  }
</script>

<style scoped>
  .tab-search {
    float: left;
    white-space: nowrap;
    display: table;
  }

  .tab-search button,
  .tab-search input,
  .tab-search label,
  .tab-search select {
    float: left;
    width: inherit;
    display: table-cell;
  }

  .tab-search select {
    border: 1px solid #ddd;
    padding: 5px 5px;
    width: 50%;
    height: unset;
  }

  .tab-search label {
    display: inline-block;
    width: 60px;
    text-align: left;
    margin-top: 5px;
    margin-right: 15px;
  }

  .btn-primary {
    background-color: #3876af;
    border-color: #306ca4;
    color: #fff;
  }

  .fa-search:before {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f002";
  }

  .add-btn {
    clear: both;
    margin-bottom: 10px;
  }

  .notice span.sdrag-gray-btn.disabled {
    opacity: 1;
    color: #676767 !important;
  }

  .notice .handle-button span .sdrag-gray-btn {
    border: none;
    line-height: 40px;
    background: none;
    color: #3876af;
    width: 50px;
  }

  .required {
    color: #e74c3c;
  }

  .textleft {
    text-align: left;
  }

  .slot-box .slot-notice input.inputtime {
    width: 30%;
    display: inline-block;
    margin-bottom: 10px;
  }

  .btn-primary:hover {
    background-color: #306ca4;
    border-color: #3876af;
    color: #fff;
  }

  .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    user-select: none;
  }

  .btn-primary {
    background-color: #3876af;
    border-color: #306ca4;
    color: #fff;
  }


</style>
